<template>
  <div class="chat-panel">
    <div class="header">桥梁管养知识智能问答</div>
    <div class="messages-container" ref="messagesContainer">
      <div v-for="(msg, index) in chatHistory" :key="index" class="message-wrapper" :class="msg.role">
        <div class="message">
          <p>{{ msg.content }}</p>
          <button v-if="msg.role === 'ai' && msg.subgraph" @click="showSubgraph(msg.subgraph)">
            在图谱中显示
          </button>
        </div>
      </div>
    </div>
    <div class="input-area">
      <input 
        v-model="question" 
        @keyup.enter="handleAskQuestion"
        placeholder="请输入您的问题..." 
        :disabled="isLoading"
      />
      <button @click="handleAskQuestion" :disabled="isLoading || !question.trim()">发送</button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue';
import { useGraphStore } from '../stores/graphStore';
import { storeToRefs } from 'pinia';

const question = ref('');
const store = useGraphStore();
const { chatHistory, isLoading } = storeToRefs(store);
const messagesContainer = ref(null);

const handleAskQuestion = () => {
  if (question.value.trim() && !isLoading.value) {
    store.askQuestion(question.value);
    question.value = '';
  }
};

const showSubgraph = (subgraph) => {
    store.setGraphData(subgraph);
};

// 自动滚动到最新消息
watch(chatHistory, () => {
    nextTick(() => {
        if(messagesContainer.value) {
            messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
        }
    });
}, { deep: true });

</script>

<style scoped>
.chat-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f5f5;
  border-left: 1px solid #ddd;
}
.header {
  padding: 15px;
  font-weight: bold;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  text-align: center;
}
.messages-container {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px;
}
.message-wrapper {
  display: flex;
  margin-bottom: 10px;
}
.message-wrapper.user {
  justify-content: flex-end;
}
.message-wrapper.ai {
  justify-content: flex-start;
}
.message {
  max-width: 80%;
  padding: 10px 15px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.message-wrapper.user .message {
  background-color: #dcf8c6;
}
.message p {
    margin: 0;
    white-space: pre-wrap;
}
.message button {
    margin-top: 8px;
    padding: 5px 10px;
    border: 1px solid #409eff;
    background-color: #ecf5ff;
    color: #409eff;
    border-radius: 5px;
    cursor: pointer;
}
.input-area {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
  background-color: #fff;
}
.input-area input {
  flex-grow: 1;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}
.input-area button {
  padding: 8px 15px;
  border: none;
  background-color: #409eff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}
.input-area button:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}
</style>